<template>
	<view class="tixian">
		<js-navbar title="提现" fontColor="#000000" :navStyle="{ position: 'fixed' }" :opacity="1" center backIcon></js-navbar>
		<view class="hboxbox"></view>

		<view class="container">
			<view class="headbox">
				<text>可提现奖励</text>
				<text>{{ money || '0' }}</text>
			</view>

			<view class="card">
				<text>提现奖励</text>
				<view class="inpbox">
					<label>￥</label>
					<input v-model="form.money" type="digit" />
					<text @click="form.money = money">全部提现</text>
				</view>
				<view class="selectbox" @click="xzyhpop = true">
					<text>提现至</text>
					<view class="rbox">
						<input v-model="bank.name" type="text" disabled placeholder="请选择提现银行" placeholder-class="plc" />
						<image src="@/static/images/right.png" mode="aspectFit"></image>
					</view>
				</view>

				<button @click="submit">申请提现</button>
			</view>
		</view>

		<u-popup :show="xzyhpop" round="8rpx" :closeOnClickOverlay="true" @close="xzyhpop = false">
			<view class="xzyhpopbox">
				<view class="title">选择到账银行卡</view>
				<view class="selectbox">
					<view class="item" v-for="(item, i) in yhlist" :key="i" @click="handleItem(item)">
						<image v-if="item.bank_name" :src="`/static/images/${item.bank_name}.png`" mode="aspectFit"></image>
						<text>{{ item.bank_name }} （{{ item.bank_card.substr(-4) }}）</text>
					</view>
					<view class="item" @click="toNav(`tixian/bindyhk`)">
						<text>使用新卡提现</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { get_userInfo } from '@/common/common_fun';
export default {
	name: 'tixian',
	data() {
		return {
			xzyhpop: false,
			yhlist: [],
			money: '',
			bank: {
				name: '',
				id: ''
			},
			form: {
				money: ''
			},
			user_info: {}
		};
	},
	onLoad() {
		this.get_money();
		get_userInfo((data) => {
			this.user_info = data;
		});
	},
	onShow() {
		this.init();
	},
	methods: {
		submit() {
			if (!this.form.money) {
				uni.showToast({
					title: '请输入提现奖励',
					icon: 'none'
				});
				return;
			}
			if (!this.bank.id) {
				uni.showToast({
					title: '请选择提现银行',
					icon: 'none'
				});
				return;
			}

			let params = {
				money: this.form.money,
				type: 0,
				bank_id: this.bank.id
			};
			this.$http.getJson('money_tixian', { ...params }).then((res) => {
				const { code, message } = res;
				this.msg(message)
				if (code === 1) {
					
				}
			});
		},
		init() {
			this.$http.getJson('money_getBankcrad', {}).then((res) => {
				this.yhlist = res.data || [];
			});
		},
		get_money(type) {
			let params = {
				page: 1,
				pagenum: 10,
				type: -1
			};
			this.$http.getJson('users_yongjinRecord', params).then((res) => {
				this.money = res.money;
			});
		},
		handleItem(item) {
			this.bank.name = item.bank_name + '（' + item.bank_card.substr(-4) + '）';
			this.bank.id = item.id;
			this.xzyhpop = false;
		}
	}
};
</script>

<style lang="less" scoped>
.tixian {
	.xzyhpopbox {
		width: 100%;
		height: 640rpx;
		padding: 0 32rpx;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		.selectbox {
			.item + .item {
				margin-top: 16rpx;
			}
			
			.item {
				display: flex;
				align-items: center;
				height: 80rpx;
				padding: 0 24rpx;
				background: #f5f5f5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				.j-active2();
				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 24rpx;
				}
				text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		.title {
			padding: 58rpx 0 42rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.container {
		position: absolute;
		top: 200rpx;
		left: 0;
		padding: 32rpx;
		width: 100%;
		.headbox {
			display: flex;
			flex-direction: column;
			padding-bottom: 34rpx;
			text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #53361e;
			}
			text:nth-of-type(2) {
				font-size: 56rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #53361e;
				&:before {
					content: '￥';
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #53361e;
				}
			}
		}
		.card {
			height: 472rpx;
			padding: 32rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			& > button {
				width: 638rpx;
				height: 80rpx;
				background: linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #60290e;
			}
			& > text {
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.inpbox {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #f2f2f2;
				padding-top: 24rpx;
				label {
					font-size: 56rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				input {
					flex: 1;
					height: 100rpx;
					font-size: 72rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #222222;
				}
				text {
					white-space: nowrap;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #50221d;
					.j-active();
				}
			}
			.selectbox {
				.flex-between();
				.j-active();
				padding: 20rpx 0;
				margin: 30rpx 0;
				& > text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
				.rbox {
					display: flex;
					align-items: center;
					flex: 1;
					justify-content: flex-end;
					input {
						text-align: right;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						margin-right: 24rpx;
					}
					.pls {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					image {
						width: 13rpx;
						height: 26px;
					}
				}
			}
		}
	}

	.hboxbox {
		position: relative;
		height: 498rpx;
		background: linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%);
	}
}
</style>